<template>
  <a-drawer
    :title="$t('all.autotext1596')"
    placement="right"
    width="80%"
    :visible="visible"
    @close="onClose"
    v-if="content"
  >
    <div class="form-item-title">{{ $t('all.autotext1597') }}</div>
    <a-descriptions  :column="{ md: 4 }">
      <a-descriptions-item :label="$t('all.autotext1574')"> {{ content.title }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1573')"> {{ content.typeName }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1599')"> {{ content.statusName }} </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1600')"> {{ content.createTime | moment('YYYY-MM-DD HH:mm') }} </a-descriptions-item>
    </a-descriptions>

    <div class="form-item-title">{{ $t('all.autotext1576') }}</div>
    <div class="font-item-content">
      <div class="ql-editor" v-html="htmlText"></div>
      <!-- <div class="content-piclist">
        <div v-for="(item,id) in pictureList" :key="id">
          <img
            :src="item.url"
            style="max-height: 250px; margin-right: 10px; float: left; overflow: auto"
          />
        </div>
      </div> -->
    </div>

    <div class="content-wrap" v-if="content.status == 2 ? true:false">
      <div class="form-item-title">{{ $t('all.autotext1601') }}</div>
      <div class="content-main">
        <div class="content-text">
          {{ $t('all.autotext1602') }}：{{ content.replyContent }}
        </div>
        <div class="content-text">
          {{ $t('all.autotext1604') }}：{{ content.replyTime | moment('YYYY-MM-DD HH:mm') }}
        </div>
      </div>
    </div>
    <div class="content-wrap">
      <a-button @click="onClose">
        {{ $t('all.autotext1578') }}
      </a-button>
      <a-button
        type="primary"
        v-if="content.status == 0 ? true:false"
        @click="handleUpdate"
        style="margin-left:10px"
      >
        {{ $t('all.autotext1580') }}
      </a-button>
    </div>
    <add-feed-back
      v-if="showFeedModal"
      ref="addFeedBack"
      @ok="onClose"
      @close="showFeedModal = false"
    >
    </add-feed-back>
  </a-drawer>
</template>
<script>
import { getDetails } from '@/api/feedback/feedback'
import AddFeedBack from './AddFeedBack'
export default {
  components: { AddFeedBack },
  data () {
    return {
      showFeedModal: false,
      visible: false,
      content: undefined,
      pictureList: [],
      htmlText: ''
    }
  },
  methods: {
    // 打开弹窗
    open (id) {
      this.visible = true
      this.getDetails(id)
    },
    // 关闭弹窗
    onClose () {
      this.visible = false
      this.$emit('ok')
      this.$emit('close')
    },
    // 拿到详情
    async getDetails (id) {
      const record = await getDetails({ id })
      this.content = record
      this.htmlText = record.content
      let picArray = record.pictures ? record.pictures.split(',') : []
      for (let i = 0; i < picArray.length; i++) {
        let pictureitem = {
          id: i,
          url: process.env.VUE_APP_BASE_IMAGE + picArray[i]
        }
        this.pictureList.push(pictureitem)
      }
    },
    handleUpdate () {
      this.showFeedModal = true
      this.$nextTick(() => (
        this.$refs.addFeedBack.handleUpdate(this.content)
      ))
    }
  }
}
</script>
<style lang="less" scoped>
  .form-item-title{
    width: 100%;
    font-size: 12pt;
    font-weight: bold;
    margin:30px 0 30px 0;
    clear:both;
  }
  .font-item-content {
    width: 100%;
    margin:30px 0 30px 0;
    clear:both;
  }
  /deep/ .ant-descriptions-title {
    font-size: 14px;
    color: #031F47;
    font-weight: normal;
    margin-bottom: 12px;
  }
  /deep/ .ant-descriptions-row {
    background: #F6F9FB;
    .ant-descriptions-item {
      padding: 10px 20px;
      color: #687991;
    }
    .ant-descriptions-item-label {
      width: 100px;
      color: #687991;
    }
    .ant-descriptions-item-content {
      color: #687991;
    }
  }
  .content-wrap {
    margin-top: 24px;
  }
  .content-main {
    width:100%;
    background: #F6F9FB;
    padding: 20px;
    overflow-y: scroll;
    .content-time {
      color: #687991;
    }
    .content-text {
      width: 100%;
      max-height: 400px;
      overflow-y: scroll;
      ::v-deep img{
        width: 100%;
      }
    }
  }
  .ql-editor {
    width: 100%;
    margin-top: 10px;
    max-height: 400px;
    overflow-y: scroll;
    ::v-deep img{
      width: 100%;
    }
  }
  .content-piclist {
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
  }
</style>
